<template>
    <div>
      <el-form  style="display: flex; justify-content: flex-start; margin: 10px 0" :inline="true"  class="demo-form-inline">
          <el-form-item label="名称">
            <el-input v-model="name" placeholder="名称"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button icon="el-icon-search" circle @click="queryAllJcx()"
              ></el-button
            >
          </el-form-item>
        </el-form>
      <el-button  style="display: flex; justify-content: flex-start; margin: 10px 0" type="primary"
      @click="dialogFormVisible = true;jcx={};sign='add';title1='新增检查项'"
      >新增</el-button>
      <el-table :data="jcxList" @selection-change="handleSelectionChange" height="65vh">
        <el-table-column prop="id" type="selection">
        </el-table-column>
        <el-table-column prop="id" label="编号">
        </el-table-column>
        <el-table-column prop="jcxname" label="项目名称" >
        </el-table-column>
        <el-table-column prop="jcxtype" label="所属类型" >
        </el-table-column>
        <el-table-column prop="fl" label="综合分类" >
        </el-table-column>
        <el-table-column prop="sex" label="适用性别">
          <template  slot-scope="scope">
            <span>{{ scope.row.sex | sex }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="age" label="适用年龄">
        </el-table-column>
        <el-table-column prop="price" label="价格">
        </el-table-column>
        <el-table-column prop="description" label="项目说明" width="120">
        </el-table-column>
        <el-table-column prop="jcxid" label="操作">
          <template slot-scope="scope">
            <el-button 
            @click="
                dialogFormVisible = true;
                sign = 'update';
               jcx = scope.row;
               title1='修改检查项信息'
              "
            type="primary" icon="el-icon-edit" circle>
            </el-button>
            <el-button   @click="DeleteJcx(scope.row.id)" type="danger" icon="el-icon-delete" circle></el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[2, 3, 4, 6, 10]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
  
      <el-dialog :title="title1" :visible.sync="dialogFormVisible">
        <el-form :model="jcx">
          <el-form-item label="项目名称" :label-width="formLabelWidth">
            <el-input v-model="jcx.jcxname" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="适用性别" :label-width="formLabelWidth">
            <el-radio-group v-model="jcx.sex">
                <el-radio :label="0">女</el-radio>
                <el-radio :label="1">男</el-radio>
                <el-radio :label="2">不限</el-radio>
            </el-radio-group>
        </el-form-item>
          <el-form-item label="项目类型" :label-width="formLabelWidth">
            <el-input v-model="jcx.jcxtype" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="所属分类" :label-width="formLabelWidth">
            <el-input v-model="jcx.fl" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="适用年龄" :label-width="formLabelWidth">
            <el-input v-model="jcx.age" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="价格" :label-width="formLabelWidth">
            <el-input v-model="jcx.price" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="项目说明" :label-width="formLabelWidth">
            <el-input v-model="jcx.description" autocomplete="off"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button
            type="primary"
            @click="
              dialogFormVisible = false;
              add();
            "
            >确 定</el-button
          >
        </div>
      </el-dialog>
    </div>
  </template>



  
  <script>
  export default {
  data () {
      return {
          name:"",
          sign:"add",
          jcx:{},
          title1:"",
          jcxList:[],
        dialogTableVisible: false,
        dialogFormVisible: false,
        currentPage: 1,
        total: 3,
        pageSize: 4,
        formLabelWidth: "120px",
      }
  },created () {
    this.queryAllJcx();  
  },
  filters: {
  sex:function(sex){
    return sex==0?'♀':sex==1?'♂':"不限"
    }
},
  methods: {
      queryAllJcx(){
          this.axios.post("/api/lzh/queryAllJcx",{
              pageNum: this.currentPage,
              pageSize: this.pageSize,
              searchObj: {
                  jcxname: this.name,
              },
          }).then(result=>{
              this.total = result.data.total;
               this.jcxList = result.data.list;
          })
      },
      add(){
          if(this.sign=="add"){
         
        this.axios.post("/api/lzh/addJcx", this.jcx).then((result) => {
          this.$message({
            message: "添加成功",
            type: "success",
          });
          this.queryAllJcx();
        });
        }else{
          
        this.axios.post("/api/lzh/UpdateJcx", this.jcx).then((result) => {
          this.$message({
            message: "修改成功",
            type: "success",
          });
          this.queryAllJcx();
        });
        }
      },
      DeleteJcx(data){
            this.axios.post("/api/lzh/deleteJcx?id="+data).then(result=>{
              this.$message({
            message: '删除成功！',
            type: 'success'
          });
          this.queryAllJcx();
            })
      },
      handleSelectionChange(val) {
      // console.log(val)
      this.multipleSelection = val;
    },
    handleSizeChange(val) {
      this.pageSize = val;
      this.queryAllJcx();
      // console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      this.queryAllJcx();
      // console.log(`当前页: ${val}`);
    },
  }
  }
  </script>
  
  <style>
  
  </style>